<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
	<title>DHTML Suite for Applications - Pane Splitter</title>
	<link rel="stylesheet" href="css/demos.css" media="screen" type="text/css">
	<style type="text/css">
	/* CSS for the demo. CSS needed for the scripts are loaded dynamically by the scripts */
	h1{
		margin-top:0px;
	}
	#northContent{
		background-color:#C3DAF9;
	}
	#menuDiv{
		background-image:url('demo-images/left-bg-menustrip.png');
		background-repeat:no-repeat;
		padding-left:5px;
		width:99%;
		position:relative;
		padding-right:0px;

	}
	#menuDiv #innerDiv{
		background-image:url('demo-images/center-bg-menustrip.png');
		background-repeat:repeat-x;		
	
	}
	#menuDiv #rightDiv{
		background-image:url('demo-images/right-bg-menustrip.png');
		background-repeat:no-repeat;
		background-position:top right;
		height:25px;
		width:20px;
		position:absolute;
		right:0px;
		top:0px;
	}
	h3{
		margin-top:30px;
	}
	

	.DHTMLSuite_paneContent .paneContentInner p{	/* A div inside .DHTMLSuite_paneContent. Add styling to it in case you want some padding */
		margin-top:0px;
	}	
	</style>	
	<script type="text/javascript">
	//var DHTML_SUITE_JS_FOLDER = '../js/separateFiles/';
	//var DHTML_SUITE_THEME_FOLDER = "../js/themes/";
	var DHTML_SUITE_THEME = 'blue';
	</script>
	<script type="text/javascript" src="../js/ajax.js"></script>
	<script type="text/javascript" src="../js/dhtml-suite-for-applications-without-comments.js"></script>
	
</head>
<body>
<!-- START DATASOURCES FOR THE PANES -->
<div id="westContent">This is the content of our west pane. This is the content of our west pane. </div>
<div id="northContent"><div id="menuDiv"><div id="innerDiv"></div><div id="rightDiv"></div></div></div>
<div id="center">
	<p>Below, you can see some of the methods available for the pane splitter widget:</p>
	<ul>
		<li><a href="#" onclick='paneSplitter.addContent("west", new DHTMLSuite.paneSplitterContentModel( { id:"newWestPane",htmlElementId:"center5",contentUrl:"includes/article3.html",refreshAfterSeconds:10,title:"Center pane 4",tabTitle: "From server 2",closable:true } ) );paneSplitter.showContent("newWestPane")'>Add some external content to the west pane</a> - <b>Methods: addContent and showContent</b></li>
		<li><a href="#" onclick='paneSplitter.reloadContent("newWestPane");return false'>Reload content </a> ( The content you added to the west pane - first link - <b>Method: reloadContent</b>) </li>
	</ul>
	<ul>
		<li><a href="#" onclick='paneSplitter.loadContent("center3","includes/article2.html",15);paneSplitter.showContent("center3");return false'>Load content </a> ( refreshes it's self after 15 seconds - <b>Methods: loadContent and showContent</b> )</li>
		<li><a href="#" onclick='paneSplitter.setRefreshAfterSeconds("center3",0);paneSplitter.showContent("center3");return false'>Clear refresh rate </a> ( for the content added by the link above - <b>Method: setRefreshAfterSeconds</b> )</a></li>
		
	</ul>
	<ul>	
		<li><a href="#" onclick='paneSplitter.deleteContentById("eastContent2");return false'>Delete </a> (content with id "eastContent2" - <b>Method: deleteContentById</b>)</li>
		<li><a href="#" onclick='paneSplitter.deleteContentByIndex("east",0);return false'>Delete by index </a> (First content in east pane - <b>Method: deleteContentByIndex</b>)</li>
	</ul>
	<ul>
		<li><a href="#" onclick="paneSplitter.hidePane('west');return false">Hide west pane</a></li>
		<li><a href="#" onclick="paneSplitter.showPane('west');return false">Show west pane</a></li>
	</ul>
	<ul>
		<li><a href="#" onclick="paneSplitter.hidePane('east');return false">Hide east pane</a></li>
		<li><a href="#" onclick="paneSplitter.showPane('east');return false">Show east pane</a></li>
	</ul>
	<ul>
		<li><a href="#" onclick="paneSplitter.hidePane('south');return false">Hide south pane</a></li>
		<li><a href="#" onclick="paneSplitter.showPane('south');return false">Show south pane</a></li>
	</ul>
	<ul>
		<li><a href="#" onclick="paneSplitter.hidePane('north');return false">Hide north pane</a></li>
		<li><a href="#" onclick="paneSplitter.showPane('north');return false">Show north pane</a></li>
	</ul>
</div>
<div id="center3">Hi there<br>I'm located at the center of the screen. You cannot resize me directly. My size is set automatically by resizing the other panes.</div>
<div id="southContent">This is the south content</div>
<div id="eastContent">I'm from the east</div>
<div id="eastContent2">I'm also from the east</div>
<!-- END DATASOURCES -->
<script type="text/javascript">
/* STEP 1 */
/* Create the data model for the panes */
var paneModel = new DHTMLSuite.paneSplitterModel();
DHTMLSuite.commonObj.setCssCacheStatus(false)
var paneWest = new DHTMLSuite.paneSplitterPaneModel( { position : "west", id:"westPane",size:200,minSize:100,maxSize:300,scrollbars:false } );
paneWest.addContent( new DHTMLSuite.paneSplitterContentModel( { id:"westContent",htmlElementId:'westContent',title:'West',tabTitle:'West pane' } ) );

var paneEast = new DHTMLSuite.paneSplitterPaneModel( { position : "east", id:"eastPane",size:150,minSize:100,maxSize:200 } );
paneEast.addContent( new DHTMLSuite.paneSplitterContentModel( { id:"eastContent",htmlElementId:'eastContent',title:'East',tabTitle: 'Tab 1' } ) );
paneEast.addContent( new DHTMLSuite.paneSplitterContentModel( { id:"eastContent2",htmlElementId:'eastContent2',title:'East 2',tabTitle:'Tab 2' } ) );


var paneSouth = new DHTMLSuite.paneSplitterPaneModel( { position : "south", id:"southPane",size:80,minSize:50,maxSize:200,resizable:true } );
paneSouth.addContent( new DHTMLSuite.paneSplitterContentModel( { id:"southContent",htmlElementId:'southContent',title:'South pane' } ) );

var paneNorth = new DHTMLSuite.paneSplitterPaneModel( { position : "north", id:"northPane",size:40,scrollbars:false,resizable:false } );
paneNorth.addContent( new DHTMLSuite.paneSplitterContentModel( { id:"northContent",htmlElementId:'northContent',title:'' } ) );

var paneCenter = new DHTMLSuite.paneSplitterPaneModel( { position : "center", id:"centerPane",size:150,minSize:100,maxSize:200 } );
paneCenter.addContent( new DHTMLSuite.paneSplitterContentModel( { id: 'center',htmlElementId:'center',title:'Pane splitter methods',tabTitle: 'Pane splitter methods',closable:false } ) );
paneCenter.addContent( new DHTMLSuite.paneSplitterContentModel( { id:'center3', htmlElementId:'center3',title:'Center pane 3',tabTitle: 'Content 3' } ) );


paneModel.addPane(paneSouth);
paneModel.addPane(paneEast);
paneModel.addPane(paneNorth);
paneModel.addPane(paneWest);
paneModel.addPane(paneCenter);



/* STEP 2 */
/* Create the pane object */
var paneSplitter = new DHTMLSuite.paneSplitter();
paneSplitter.addModel(paneModel);	// Add the data model to the pane splitter
paneSplitter.init();	// Add the data model to the pane splitter


// This function opens a new tab - called by the menu items
function openPage(position,id,contentUrl,title,tabTitle,closable)
{
	var inputArray = new Array();
	inputArray['id'] = id;
	inputArray['position'] = position;
	inputArray['contentUrl'] = contentUrl;
	inputArray['title'] = title;
	inputArray['tabTitle'] = tabTitle;
	inputArray['closable'] = closable;
	
	paneSplitter.addContent(position, new DHTMLSuite.paneSplitterContentModel( inputArray ) );
	paneSplitter.showContent(id);		
	
}

function openClassDocumentation()
{
	var docWin = window.open('../doc/js_docs_out/index.html');
	docWin.focus();
	
}
</script>

<ul id="menuModel" style="display:none">
	<li id="50000"jsFunction="saveWork()" itemIcon="../images/disk.gif"><a href="#" title="Open the file menu">File</a>
		<ul width="150">
			<li id="500001"><a href="#" title="Save your work">Save</a></li>
			<li id="500002"><a href="#">Save As</a></li>
			<li id="500004" itemType="separator"></li>
			<li id="500003"><a href="#">Open</a>
				<ul width="130">
					<li id="5000031"><a href="#">Project</a>	
					<li id="5000032"><a href="#">Template</a>	
					<li id="5000033"><a href="#">File</a>	
					
				</ul>
			</li>
		</ul>
	</li>	
	<li id="500011"><a href="#">Demos</a>
		<ul width="150">
			<li id="5000115" jsFunction="openPage('center','sliderWidget','includes/pane-splitter-slider-2.inc','Slider widget','Slider widget')"><a href="#">Slider widget</a></li>
			<li id="5000120" jsFunction="openPage('center','textEdit','includes/pane-splitter-text-edit.php','Inline text edit','Inline Text Edit')"><a href="#">Inline text edit</a></li>
			<li id="5000111"><a href="#">Table widgets</a>
				<ul width="180">
					<li id="50001111" jsFunction="openPage('center','myTableWidget','includes/pane-splitter-table.inc','A table widget','A table widget')"><a href="#">A table(client sort)</a></li>	
					<li id="50001112" jsFunction="openPage('center','myTableWidgetServer','includes/pane-splitter-table-server.php','A table widget(Server sort)','A table widget(Server sort)')"><a href="#">A table (serverside sort)</a></li>	
				</UL>
			</li>
			<li id="5000112"><a href="#">Tab view demos</a>	
				<ul width="130">
					<li id="50001121" jsFunction="openPage('center','tabViewDemo','includes/pane-splitter-tabs.inc','Tab view demo','Tab view demo')"><a href="#">Tab demo</a></li>	
					<li id="50001122" jsFunction="openPage('center','tabViewDemo2','includes/pane-splitter-tabs2.inc','Tab view demo','Tab view demo')"><a href="#">Tab demo 2</a></li>	
				</ul>
			</li>
			<li id="5000119"><a href="#">Drag'n drop</a>
				<ul width="180">
					<li id="50001191" jsFunction="openPage('west','myFolderTree','includes/pane-drag-drop-folder-tree.inc','Drag\'n drop folder tree','Folder tree')"><a href="#">Drag'n drop folder tree</a></li>
					<li id="50001192" jsFunction="openPage('center','myDragDrop','includes/pane-splitter-dragdrop.inc','Drag\'n drop widget','Drag\'n drop')"><a href="#">Drag'n drop</a></li>
					<li id="50001193" jsFunction="openPage('center','dragdrop3','includes/pane-splitter-dragdrop3.inc','Drag\'n drop demo 2','Drag\'n drop demo 2',true);"><a href="#">Drag'n drop 2</a></li>
				</ul>					
			</li>
			<li id="5000116" jsFunction="openPage('center','ajaxTooltip','includes/pane-splitter-dyn-tooltip.inc','Dynamic tooltip','Dynamic tooltip')"><a href="#">Dynamic tooltip</a></li>	
			<li id="5000114" jsFunction="openPage('center','contextMenu','includes/pane-splitter-context-menu.inc','Context menu','Context menu')"><a href="#">Context menu</a></li>	
			<li id="5000121" jsFunction="openPage('center','infoPane','includes/pane-splitter-info-pane.inc','Info Pane','Info Pane')"><a href="#">Info pane</a></li>	
			<li id="5000122" jsFunction="openPage('center','modalMessage','includes/pane-splitter-modal-message.inc','Modal message','Modal message')"><a href="#">Modal Message</a></li>	
		</ul>			
	</li>
	<li id="50003" itemType="separator"></li>
	<li id="50002"><a href="#">Documentation</a>
		<ul width="120">
			<li id="500021"><a href="#">Tutorials</a>
				<ul width="150">
					<li id="5000211" jsFunction="openPage('center','tutAjaxTooltip','includes/tutorial-ajax-tooltip.inc','Tutorial - Dynamic tooltip','Dynamic tooltip')"><a href="#">Dynamic tooltip</a></li>			
					<li id="5000212" jsFunction="openPage('center','tutSlider','includes/tutorial-slider.inc','Tutorial - Slider','Slider')"><a href="#">Slider widget</a></li>			
					<li id="5000213" jsFunction="openPage('center','tutTextEdit','includes/tutorial-textEdit.inc','Tutorial - Text Edit','Text Edit')"><a href="#">Inline text edit</a></li>			
					<li id="5000214"><a href="#">Table widget</a>
						<ul width="190">
							<li id="50002141" jsFunction="openPage('center','tutTableWidget1','includes/tutorial-tableWidget1.inc','Tutorial - Table widget (sort data on client)','Table widget(client)')"><a href="#">Table widget(client sort)</a></li>
							<li id="50002142" jsFunction="openPage('center','tutTableWidget2','includes/tutorial-tableWidget2.inc','Tutorial - Table widget (sort data on server)','Table widget(server)')"><a href="#">Table widget(server sort)</a></li>
						
						</ul>
					</li>	
					<li id="5000215" jsFunction="openPage('center','tutMenuBar','includes/tutorial-menuBar.inc','Tutorial - Menu bar','Menu bar')"><a href="#">Menu bar</a></li>			
					<li id="5000216" jsFunction="openPage('center','tutMenuBar','includes/tutorial-paneSplitter.inc','Tutorial - Pane splitter','Pane splitter')"><a href="#">Pane splitter</a></li>			
				</ul>
			</li>	
			<li id="500022" jsFunction="openClassDocumentation()"><a href="#">Classes</a></li>		
		</ul>
	</li>

</ul>	
	
<!-- This is the datasource for menu items which are added dynamically to the menu -->
<ul id="additionalModel" style="display:none">
	<li id="60000"><a href="#">Internet Option</a></li>
	<li id="60001"><a href="#">Debug URL</a></li>
	<li id="60001"><a href="#">CVS</a>
		<ul width="100">
			<li id="600011"><a href="#">Check out</a></li>
			<li id="600012"><a href="#">Update</a></li>
		</ul>
	</li>		
</ul>
<script type="text/javascript">

	
	var menuModel = new DHTMLSuite.menuModel();
	DHTMLSuite.configObj.setCssPath('css/');
	
	menuModel.addItemsFromMarkup('menuModel');
	menuModel.setMainMenuGroupWidth(00);	
	menuModel.init();
	
	var menuBar = new DHTMLSuite.menuBar();
	menuBar.addMenuItems(menuModel);
	menuBar.setLayoutCss('menu-bar-ps.css');
	menuBar.setMenuItemLayoutCss('menu-item-ps.css');

	menuBar.setTarget('innerDiv');
	
	menuBar.init();
	
	DHTMLSuite.configObj.resetCssPath();
</script>		

</body>
</html>
